<template>
<div class="welisten-talk-create">
	<Row>
		<Col :span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu(0)"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem :to="{'name':'welisten-talk-index'}">短信管理</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner20"></div>
		</Col>
	</Row>
	<Form ref="vform" :model="vform" :label-width="100"  :rules="ruleValidate">
		<Row type="flex" :gutter="16">
			<Col :span=12>
				<Row type="flex">
					<Col :span="24">
						<FormItem label="昵称" prop="nickname">
							<Input v-model="vform.nickname" placeholder="请填写昵称" readonly @click.native="onSelectUser">
								<Icon type="md-search" slot="suffix"></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="类型" prop="status">
							<Select v-model="vform.category_id" >
								<Option v-for="(item,index) in categoryList" :value="item.value" :key="index">{{ item.label }}</Option>
							</Select>
						</FormItem>
					</Col>
					<Col :span="24">
						<FormItem label="手机号" prop="mobile">
							<Input v-model="vform.mobile"></Input>
						</FormItem>
					</Col>
				</Row>
			</Col>

			<Col :span="24">
				<FormItem label="">
					<Button type="success" @click="onSave">发送</Button>
				</FormItem>
			</Col>
		</Row>
	</Form>

	<Listener-Selector :show.sync="showBox" @on-hide="showBox=false" @on-change="onListenerChange"></Listener-Selector>
	

</div>
</template>
<script>
var compareMobile = (rule, value, callback) =>{
  if(value.trim() == '') {
    callback(new Error('手机号不能为空'));
  } else {
	  if(/^1[0-9]{10,10}/.test(value)){callback()}
	  else{callback(new Error('请输入正确的手机号'))}

  }
};

// 引入子组件
import ListenerSelector from '@/components/ListenerSelector/ListenerSelector.vue'
import {mapState,mapGetters} from 'vuex'
import { Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
export default { 
	name:'communication-sms-create',
	components: { Tag, Card, Page, Modal, ListenerSelector, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
	data () {
		return {
			title:'新建',
			showBox:false,
			listenerObj:{},
			ruleValidate: {
				nickname: [
					{ required: true, message: '请选择用户', trigger: 'blur' },
				],
				mobile: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{ type: 'string',  len:11, message: '请输入11位手机号', trigger: 'blur' },
					{validator: compareMobile, message: '请输入11位手机号', trigger: 'blur' },
				],
			},
			
			vform:{
				nickname: null,
				uid:'',
			},
			statusList: [
				{value: 0,label: '暂存'},
				{value: 1,label: '成功'},
				{value: 2,label: '失败'},
			],
			categoryList: [
				{value: 0,label: '注册短信'},
				{value: 1,label: '重置密码'},
				{value: 2,label: '找回密码'},
			],
		}
	},
	methods:{
		init:function(){},

		onSave:function(index){
			let self=this
			let _flag=true
			this.$refs.vform.validate((valid) => {
				if (!valid){
					this.$Message.error('请完成必填项')
					_flag=false
				}
			})
			if(!_flag){return}
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/communication/sms?token="+self.token,{'data':JSON.stringify(this.vform)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功')
					self.$router.push({path:'/communication/sms/index'})
				}else{
					self.$Message.error(response.data.message)
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
		onSelectUser:function(){
			this.showBox=true
		},
		onListenerChange:function(obj){
			this.listenerObj=obj
			this.vform.uid=this.listenerObj.uid
			this.vform.nickname=this.listenerObj.nickname
		},
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
	},
	computed:{
		...mapGetters(['token','menuIndex'])
	},
}



</script>

<style lang="less" scoped>
</style>